<template>
  <div class="box-container">
    <el-form :ref="refName" :model="model" label-width="80px" label-position="top" :gutter="24">
      <div class="box-f-card">
        <el-card class="box-card" shadow="never">
          <div slot="header">
            <span>基础信息</span>
          </div>
          <el-col :xl="8" :lg="8" :md="12" :sm="24">
            <el-form-item label="姓名:">
              <el-input v-model="model.text" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :xl="8" :lg="8" :md="12" :sm="24">
            <el-form-item label="性别:">
              <el-radio-group v-model="model.column3">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :xl="8" :lg="8" :md="12" :sm="24">
            <el-form-item label="身份证号:">
              <el-select v-model="model.selectData" clearable placeholder="请选择">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xl="8" :lg="8" :md="12" :sm="24">
            <el-form-item label="单位名称:">
              <el-input v-model="model.text" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :xl="8" :lg="8" :md="12" :sm="24">
            <el-form-item label="建成日期:">
              <el-date-picker v-model="model.activateDate" type="date" placeholder="请选择" />
            </el-form-item>
          </el-col>
          <el-col :xl="8" :lg="8" :md="12" :sm="24">
            <el-form-item label="经营状态:">
              <el-select v-model="model.selectData" clearable placeholder="请选择">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-card>
      </div>
    </el-form>
    <el-card class="box-card box-container-floor" shadow="never">
      <div class="floor-btn">
        <el-button @click="modelClose">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import { postAction } from '@/api/manage'
export default {
  components: {
  },
  data() {
    return {
      model: {
        checkList: []
      },
      refName: 'ruleForm',
      updatePageState: '',
      url: {
        update: ''
      },
      options: []
    }
  },
  // 进入路由触发
  beforeRouteEnter: (to, from, next) => {
    to.meta.isShowBack = true
    to.meta.title = to.query.title
    next()
  },
  created() {
    // 更新页面状态标识缓存起来 add edit
    this.updatePageState = this.$route.query.updatePageState
  },
  mounted() {
  },
  methods: {
    // 提交
    submitForm() {
      console.log('表单数据', this.model)
      this.$refs[this.refName].validate((valid) => {
        if (valid) {
          this.$store.dispatch('app/setLoading', true)
          postAction(this.url.update, this.model).then((res) => {
            if (res.code === 1) {
              this.modelClose()
              this.$message.success(res.message || '操作成功！')
              this.$emit('ok')
            } else {
              this.$message.warning(res.message || '操作失败！')
            }
          }).finally(() => {
            this.$store.dispatch('app/setLoading', false)
          })
        } else {
          return false
        }
      })
    },
    // 返回
    modelClose() {
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="scss" scoped>
.box-container{
  display: inline-block;
  width: 100%;
  .box-f-card{
    margin-bottom: 80px;
    .box-card{
      margin-bottom: 16px;
      .el-col{
        padding: 0 40px;
      }
      ::v-deep .el-form-item__label{
        line-height: 16px;
      }
    }
    .box-card:nth-last-child(2){
      border-bottom: none;
    }
  }
  .box-container-floor{
    position: fixed;
    bottom:0;
    left:0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    height: 64px;
    margin-bottom: 0;
    padding-right: 16px;
    box-shadow: 0px -1px 16px 1px rgba(0,0,0,0.08);
    border-radius: 4px 4px 4px 4px;
    opacity: 1;
    z-index: 900;
    border: none;
    ::v-deep .el-card__body{
      padding: 8px 0;
    }
  }
}
</style>

